<template>
 <div id="starBox" class="pad ov">
            <div v-for="n in 5"
              @mouseenter="enter(n)"
             @mouseleave="leave()"
             @click="Selected(n)"
           class="fl el-icon-star-off" :class="{'el-icon-star-on':list.score>=n}"></div>
  </div>
</template>
<script>
export default {
  name: 'Star',
  props: ['list'],
  data () {
    return {
     // cur : -1,
     flag : false, //鼠标点击后变成true，鼠标进入进出事件就不会改变背景图
    }
  },
  computed: {
  },
  watch: {
    ['list.score'](val){
      this.$emit('scoreCanbank',val)
    },
  },
  created () {
    console.log('commentType:', this.commentType)
   // this.getCommentPage()
  },
  methods: {
    //5 start code
       enter(idx,item){
            if(!this.flag){
             
                this.$set(this.list,'score',idx)
               // this.cur = idx;
            }
        },
        leave(){
            if(!this.flag){
                //this.list.score = -1;
                 this.$set(this.list,'score',0)
            }
        },
        Selected(n){
            this.flag = true;
             this.$set(this.list,'score',n)
        },
        //---end
  }
}
</script>

<style lang='scss' scoped>
 /deep/ [class*="el-icon-star-off"]{
    &.el-icon-star-on{
       color:yellow;
       font-size: 21px;
    }
    font-size: 20px;
  }
</style>
